<template>
	<view class="contract-list">
		<view class="tip" v-if="showTip">待审核</view>
		<view class="title">签署标题：{{contract.title}}</view>

		<view class="user">
			<view class="name">签署人：{{contract.name}}</view>
			<view class="phone">电话：{{contract.phone}}</view>
		</view>

		<view class="time" style="margin-bottom: 10rpx;">时间：{{formatISODate(contract.createTime)}}</view>
		<view class="time" v-if="!showTip">驳回说明：{{contract.message}}</view>
	</view>
</template>

<script>
	import {
		formatISODateTime
	} from '@/utils/index.js'
	export default {
		name: 'ContratList',
		props: {
			contract: {
				type: Object,
				default: {}
			},
			showTip: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {}
		},
		methods: {
			formatISODate(time) {
				return formatISODateTime(time)
			}
		}
	}
</script>

<style scoped lang="scss">
	.contract-list {
		margin-bottom: 20rpx;
		position: relative;
		padding: 40rpx 20rpx 20rpx;
		background-color: #ffffff;
		border-radius: 13rpx;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;

		.tip {
			position: absolute;
			top: 0;
			right: 0;
			width: 100rpx;
			height: 40rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			color: #ffffff;
			border-top-right-radius: 13rpx;
			border-bottom-left-radius: 13rpx;
			background-color: #409Eff;
		}

		.title {
			font-size: 24rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.user {

			.name,
			.phone {
				margin-bottom: 10rpx;
				font-size: 22rpx;
				color: '#666666'
			}

		}

		.time {
			font-size: 22rpx;
			color: '#666666'
		}
	}
</style>